<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap对齐与排序</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    .row{
        border: dashed 1px red;
        height: 100px;
        margin: 10%;
    }
    .show{
        border: solid 1px blue;
        height: 30px;
    }
    .h2{
        text-align: center;
    }
</style>
<body>
    <div class="container">
        <div class="row align-items-start">
            <div class="show col-sm">第一列</div>
            <div class="show col-sm">第二列</div>
            <div class="show col-sm">第三列</div>
        </div>
    </div>
    <div class="container">
        <div class="row align-items-center">
            <div class="show col-sm">第一列</div>
            <div class="show col-sm">第二列</div>
            <div class="show col-sm">第三列</div>
        </div>
    </div>
    <div class="container">
        <div class="row align-items-end">
            <div class="show col-sm">第一列</div>
            <div class="show col-sm">第二列</div>
            <div class="show col-sm">第三列</div>
        </div>
    </div>
    <br/>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="show col-sm-3 align-self-start">第一列</div>
            <div class="show col-sm-3 align-self-center">第二列</div>
            <div class="show col-sm-3 align-self-end">第三列</div>
        </div>
    </div>
    <br/>
    <h2 class="h2">列排序 soft</h2>
    <div class="container">
        <div class="row align-items-center">
            <div class="show col-sm-3 order-3">第一列</div>
            <div class="show col-sm-3">第二列</div>
            <div class="show col-sm-3">第三列</div>
        </div>
    </div>
    <br/>
    <h2 class="h2">列排序 first last</h2>
    <div class="container">
        <div class="row align-items-center">
            <div class="show col-sm-3 order-last">第一列</div>
            <div class="show col-sm-3">第二列</div>
            <div class="show col-sm-3 order-first">第三列</div>
        </div>
    </div>
    <h2 class="h2">自定义间距 offset ml</h2>
    <div class="container">
        <div class="row align-items-center">
            <div class="show col-sm-3 ml-2">第一列</div>
            <div class="show col-sm-3 offset-1">第二列</div>
            <div class="show col-sm-3 ml-auto">第三列</div>
        </div>
    </div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    $(function(){
        console.log("jquery入口函数启动")
    })
</script>
</body>
</html>